<template>
  <Row :gutter="24">
    <i-col span="4">
      <Card :bordered="false" dis-hover>
        <Form class="ivu-mb-16">
          <Checkbox label="true" v-model="check" @on-change="checks"
            >全部选中</Checkbox
          >
          <Checkbox label="true" v-model="expand" @on-change="expands"
            >全部展开</Checkbox
          >
        </Form>
        <Tree
          :data="topicList"
          ref="tree"
          @on-check-change="treeChange"
          show-checkbox
        ></Tree>
      </Card>
    </i-col>
    <i-col span="20">
      <Card :bordered="false" dis-hover>
        <Form inline>
          <FormItem
            ><Input
              placeholder="请输入搜索关键词"
              v-model="params.keyword"
              clearable
              @on-clear="askData"
              @on-enter="askData"
          /></FormItem>
          <FormItem>
            <DatePicker
              type="daterange"
              placeholder="选择发布日期"
              @on-change="timeChange"
            />
          </FormItem>
          <FormItem class="ivu-fr">
            <Button
              type="primary"
              v-hasC="{
                name: 'v1-content-list-create',
                flag: 'v1/content/list/create',
              }"
              @click="handleAdd('a')"
              >新增</Button
            >
          </FormItem>
        </Form>
        <Table
          :columns="columns"
          :data="list"
          :loading="loading"
          @on-sort-change="sortChange"
        >
          <template #title="{ row }">
            <Ellipsis :text="row.title" :length="8" tooltip></Ellipsis>
          </template>
          <template #image="{ row }">
            <img
              v-if="row.thumb"
              :src="row.thumb"
              @click="seeBIg(row.thumb)"
              style="width: 40px; height: 40px"
            />
          </template>
          <template #status="{ row }">
            <Badge v-if="row.is_publish == 1" status="success" text="正常" />
            <Badge
              v-if="row.is_publish == 0"
              status="processing"
              text="待发布"
            />
            <Badge v-if="row.is_publish == -1" status="default" text="下线" />
          </template>
          <template #action="{ row }">
            <a
              @click="handleEdit(row)"
              v-hasC="{
                name: 'v1-content-list-edit',
                flag: 'v1/content/list/edit',
              }"
              >编辑</a
            >
            <Divider
              type="vertical"
              v-hasC="{
                name: 'v1-content-list-edit',
                flag: 'v1/content/list/edit',
              }"
            ></Divider>
            <a
              @click="handleDelete(row)"
              v-hasC="{
                name: 'v1-content-list-delete',
                flag: 'v1/content/list/delete',
              }"
              class="delete"
              >删除</a
            >
          </template>
        </Table>
        <Page
          :total="total"
          class="ivu-mt-16"
          v-model="params.page"
          :current.sync="params.page"
          :page-size="params.pageSize"
          :page-size-opts="pageOpts"
          @on-change="formSize"
          show-total
          show-elevator
          show-sizer
          @on-page-size-change="formChangePage"
        />
        <Modal
          :title="add ? '新增' : '编辑'"
          width="1180"
          v-model="articleModal"
          :mask-closable="false"
          :draggable="true"
          footer-hide
        >
          <arcicle
            ref="arcChange"
            @refresh="refreshData"
            :editorType="add"
            :showModal='articleModal'
            :arcInfo="arcInfo"
          />
          <!-- <activity v-else /> -->
          <div slot="footer" class="modalFoot">
            <Button @click="canceledit()">取消</Button>
            <Button type="primary" @click="sendData" class="ivu-ml-16"
              >确定</Button
            >
          </div>
        </Modal>
      </Card>
    </i-col>
    <Modal v-model="imgModel" footer-hide>
      <p slot="header">查看大图</p>
      <img :src="src" style="width: 100%; object-fit: cover" />
    </Modal>
  </Row>
</template>
<script>
import { arcList, arcDel, arcCondition } from "@/api/jzy.js"
import arcicle from "@/components/admin/article"
import activity from "@/components/admin/article/activity.vue"
export default {
  name: "nameList",
  components: { arcicle, activity },
  data () {
    return {
      check: false,
      expand: false,
      imgModel: false,
      add: true,
      total: 0,
      articleModal: false,
      current: 1,
      arcInfo: {},
      pageOpts: [10, 15, 20, 30, 50],
      params: {
        page: 1,
        pageSize: 10,
        keyword: '',
        list_id: '',
        start_time: '',
        end_time: '',
        sort_column: '',
        sort_value: ''
      },
      topicList: [],
      columns: [
        // {
        //   type: "selection",
        //   width: 60,
        // },
        {
          title: "id",
          key: "id",
          width: 60,
        },
        {
          title: "栏目",
          key: "name",
          minWidth: 128,
        },
        {
          title: "标题",
          slot: "title",
          minWidth: 168,
          tooltip: true,
        },
        {
          title: "缩略图",
          slot: "image",
          width: 80,
        },
        {
          title: "浏览",
          key: "views",
          width: 80,
          sortable: 'custom',
        },
        {
          title: "排序",
          key: "sort",
          width: 80,
          sortable: 'custom',
        },

        {
          title: "状态",
          slot: "status",
          width: 95,
        },
        {
          title: "发布人",
          key: "publisher",
          width: 90,
        },
        {
          title: "发布时间",
          key: "publish_time",
          width: 170,
          sortable: 'custom',
        },
        {
          title: "创建时间",
          key: "created_at",
          width: 170,
          sortable: 'custom',
        },
        {
          title: "操作",
          slot: "action",
          width: 118,
          fixed: "right",
        },
      ],
      list: [],
      loading: false,
      show: "",
      src: ""
    }
  },
  methods: {
    checks () {
      this.topicList.forEach(item => {
        item.checked = this.check
        item.children.forEach(item1 => {
          item1.checked = this.check
        })
      })
      this.params.list_id = ''
      this.askData()
    },
    expands () {
      this.topicList.forEach(item => {
        item.expand = this.expand
        item.children.forEach(item1 => {
          item1.expand = this.expand
        })
      })
    },
    treeChange (e) {
      let ids = e.map(item => {
        return item.value
      })

      this.params.list_id = ids.join(',')
      this.askData()
    },
    askData () {
      this.params.page=1
      this.getData()
    },
    getData () {
      const params = this.params
      this.loading = true
      arcList(params).then((res) => {
        this.list = res.list
        this.total = res.total
      }).finally(() => {
        this.loading = false
      })
    },
    refreshData (e) {
      this.articleModal = e
      this.getData()
    },
    getChannels () {
      arcCondition().then(res => {
        this.topicList = []
        let arr=[]
        for(let i in res.lists){
          arr.push(res.lists[i])
        }
        arr.forEach((item, key) => {
          this.topicList.push({
            title: item['name'],
            value: item['id'],
            children: [],
            expand: this.expand
          })
          if (item.children.length > 0) {
            item.children.forEach((item1) => {
              this.topicList[key]['children'].push({
                title: item1['name'],
                value: item1['id'],
                expand: this.expand
              })
            })
          }
        })
      })
    },
    sendData () {
      this.$refs.arcChange.saveData()
    },
    timeChange (e) {
      this.params.start_time = e[0]
      this.params.end_time = e[1]
      this.askData()
    },
    sortChange (e) {
      this.params.sort_column = e.key
      this.params.sort_value = e.order
      this.getData()
    },
    canceledit () {
      this.articleModal = false
    },
    formSize (e) {
      this.params.page = e
      this.current = e
      this.getData()
    },
    formChangePage (e) {
      this.params.pageSize = e
      this.getData()
    },
    handleAdd (e) {
      this.show = e
      this.add = true
      this.articleModal = true
      this.arcInfo = {}
    },
    handleEdit (e) {
      this.add = false
      this.articleModal = true
      this.arcInfo = e
    },
    handleDelete (e) {
      this.$Modal.confirm({
        title: "温馨提示",
        content: "确定删除此项?",
        onOk: () => {
          arcDel({ id: e.id }).then(res => {
            this.askData()
          })
        },
      })
    },
    seeBIg (item) {
      this.src = item
      this.imgModel = true
    },
  },
  mounted () {
    this.getData()
    this.getChannels()
  },
};
</script>
<style lang='less'>
.ivu-modal {
  top: 50px;
}
.delete {
  color: rgb(226, 5, 5);
}
.modalFoot {
  text-align: right;
  border-top: 1px solid #ddd;
  padding-top: 16px;
}
</style>
